<template>
    <div>
<h3>修改房型</h3>
<table class="table table-bordered">
<tbody>
    <tr>
        <td align="right">房型名称</td>
        <td><input type="text" v-model="houseType.HouseTypeName"></td>
    </tr>
    <tr>
        <td align="right">单价(元)</td>
        <td><input type="text" v-model="houseType.Price"></td>
    </tr>
    <tr>
        <td align="right">室内面积(平方米)</td>
        <td><input type="text" v-model="houseType.Area"></td>
    </tr>
    <tr>
        <td align="right">最多入住人数</td>
        <td><input type="text" v-model="houseType.Count"></td>
    </tr>
    <tr>
        <td align="right">图片集</td>
        <td>
            <input type="file" @change="UpFile">
            <img :src="houseType.Photo" v-if="houseType.Photo!=''" width="100px" height="100px" alt="">
        </td>
    </tr>
    <tr>
        <td align="right">房型描述</td>
        <td>
            <textarea v-model="houseType.Desc" cols="50" rows="6"></textarea>
        </td>
    </tr>
    <tr>
        <td align="right">房型描述</td>
        <td>
           <input type="radio" name="window" :value="1" v-model="houseType.IsWindow">有窗
           <input type="radio" name="window" :value="0" v-model="houseType.IsWindow">无窗
        </td>
    </tr>
    <tr>
        <td align="right">房型描述</td>
        <td>
          <input type="button" value="保存" class="btn btn-primary" @click="Upd">
        </td>
    </tr>
</tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import axios from 'axios';

const route=useRoute();
const router=useRouter();

onMounted(()=>{
    GetHosueType();
})

let houseType=reactive({
  "Id": route.query.id,
  "HouseTypeName": "",
  "Price": "",
  "Area": "",
  "Count": "",
  "Photo": "",
  "Desc": "",
  "IsWindow": "",

})

const GetHosueType=()=>{
    axios({
        method:"get",
        url:"/api/House/GetHouseType",
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        Object.assign(houseType,res.data);
        console.log(res);
        
    })
    .catch(err=>{
        console.log(err);
        
    })
}

const Upd=()=>{

    if(houseType.HouseTypeName===""){
        alert("房型名称不能为空");
        return;
    }
    if(houseType.Price==""){
        alert("单价不能为空");
        return;
    }
    if(houseType.Area===""){
        alert("室内面积不能为空");
        return;
    }
    if(houseType.Count===""){
        alert("最多入住人数不能为空");
        return;
    }
    if(houseType.Desc===""){
        alert("房型描述不能为空");
        return;
    }

    axios({
        method:"put",
        url:"/api/House/UpdHouseType",
       data:houseType
    })
    .then(res=>{
      if(res.data==-1){
        alert("房型名称已存在")
      }
      else if(res.data>0){
        alert("修改成功");
        router.push('/')
      }
      else{
        alert("修改失败")
      }
        console.log(res);
        
    })
    .catch(err=>{
        console.log(err);
        
    })
}

const UpFile=(e:any)=>{

    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);

    axios({
        method:"post",
        url:"/api/UpLoad/UpFile",
        data:f
    })
    .then(res=>{
       houseType.Photo=res.data;
        console.log(res);
        
    })
    .catch(err=>{
        console.log(err);
        
    })
}
</script>

<style scoped>

</style>